<style >
	@import url("@/common/css/my.css");
</style>
<template>
	<view>
		<commonHeader :titleName="titleName"></commonHeader>
		<view class="content_info">
			<view class="my_line">
				<text class="my_user_info_item_title">个人信息</text>
				<view class="my_user_info_item">
					<text class="my_user_info_item_left">姓名</text>
					<input class="my_user_info_item_right" v-model="name" type="text" placeholder="请输入姓名" />
				</view>
				<view class="my_user_info_item">
					<text class="my_user_info_item_left">手机号</text>
					<input class="my_user_info_item_right" v-model="phone" @blur="blur1(phone)" type="text" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="my_line">
				<text class="my_user_info_item_title">上传身份证</text>
				<view class="upload_card" @click="uploadCardFront">
					<view class="upload_card_left">
						<text class="upload_card_left_name">头像面</text>
						<text class="upload_card_left_desc">上传您的身份证头像面</text>
					</view>
					<view class="upload_card_right">
						<image class="upload_card_img" :src="cardImgFront" mode="aspectFill"></image>
					</view>
				</view>
				<view class="upload_card" @click="uploadCardBack">
					<view class="upload_card_left">
						<text class="upload_card_left_name">国徽面</text>
						<text class="upload_card_left_desc">上传您的身份证国徽面</text>
					</view>
					<view class="upload_card_right">
						<image class="upload_card_img" :src="carcImgBack" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="xieyi">
				<image src="../../../../static/agree_no.png" mode="aspectFill" v-if="!is_agree_xieyi" @click="agreeXiyi(true)"></image>
				<image src="../../../../static/agree.png" mode="aspectFill" v-if="is_agree_xieyi" @click="agreeXiyi(false)"></image>
				<view class="regist_xieyi" @click="openXieyi">
					同意跑跑注册协议
				</view>
			</view>
			<view class="applyBtn" @click="submit">
				提交
			</view>
		</view>
		<view class="progress" v-show="showProgress">
			<view class="progress_text">上传中</view>
			<progress style="width: 600rpx;padding: 13rpx 0 0 25rpx;" :percent="progress" active stroke-width="3" />
		</view>
	</view>
</template>

<script>
	import commonHeader from '@/components/common-header/common_header_title.vue';
	import base from '../../../../api/base'
	export default {
		components:{
			commonHeader
		},
		data() {
			return {
				showProgress:false,
				progress:0,//上传进度
				titleName:'申请代理',
				is_agree_xieyi:false,
				name:'',
				phone:'',
				cardImgFront:'../../../../static/card_in.png',//正面照
				cardImgFrontFile:'',
				carcImgBack:'../../../../static/card_out.png',
				cardImgBackFile:'',
				Authorization:uni.getStorageSync('adminToken')
			}
		},
		methods: {
			agreeXiyi(flag){
				this.is_agree_xieyi = flag
			},
			openXieyi(){
				this.$uniNavigateTo('/pages/my/xieyi/registXieyi/registXieyi')
			},
			blur1(reg_tel){
				if (reg_tel === '') {
					this.$commonJs.showToast.showNoneToast('手机号码不可为空')
				}else{
					var reg=/^1[3456789]\d{9}$/;
					if(!reg.test(reg_tel)){
						this.$commonJs.showToast.showNoneToast('请输入有效的手机号码')
					}
				}
			},
			uploadCardFront(){
				let that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        const uploadTask = uni.uploadFile({
				            url: base.upload_user_agent_url,
				            filePath: tempFilePaths[0],
							header:{
								'Authorization':that.Authorization
							},
				            name: 'file',
				            success: (uploadFileRes) => {
								that.showProgress = false
								that.progress = 0
								let data = JSON.parse(uploadFileRes.data)
								if(data.code == 200){
									this.$commonJs.showToast.showNoneToast(data.msg)
									that.cardImgFront = data.url
									that.cardImgFrontFile = data.fileName
								}
				            },
							fail:(err)=>{
								this.$commonJs.showToast.showNoneToast(err)
								console.log(err)
							}
				        });
				
				        uploadTask.onProgressUpdate((res) => {
				            that.showProgress = true
							that.progress = res.progress
				        });
				    }
				});
			},
			uploadCardBack(){
				let that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        const uploadTask = uni.uploadFile({
				            url: base.upload_user_agent_url,
				            filePath: tempFilePaths[0],
							header:{
								'Authorization':that.Authorization
							},
				            name: 'file',
				            success: (uploadFileRes) => {
								that.showProgress = false
								that.progress = 0
								let data = JSON.parse(uploadFileRes.data)
								if(data.code == 200){
									this.$commonJs.showToast.showNoneToast(data.msg)
									that.carcImgBack = data.url
									that.carcImgBackFile = data.fileName
								}
				            },
							fail:(err)=>{
								this.$commonJs.showToast.showNoneToast(err)
								console.log(err)
							}
				        });
				
				        uploadTask.onProgressUpdate((res) => {
				            that.showProgress = true
							that.progress = res.progress
				        });
				    }
				});
			},
			submit(){
				let that = this
				if(that.name == ''){
					this.$commonJs.showToast.showNoneToast('请输入姓名')
					return false
				}
				if(that.cardImgFrontFile == ''){
					this.$commonJs.showToast.showNoneToast('请上传身份证头像面')
					return false
				}
				if(that.carcImgBackFile == ''){
					this.$commonJs.showToast.showNoneToast('请上传身份证国徽面')
					return false
				}
				if(that.is_agree_xieyi == false){
					this.$commonJs.showToast.showNoneToast('跑跑协议未同意')
				}
				let postData = {"name":that.name,"phone":that.phone,"cardImgFront":that.cardImgFront,"carcImgBack":that.carcImgBack}
				this.$api.adminAct.applyAdminAccount(postData)
				.then(res =>{
					if(res.code == 200){
						this.$store.dispatch('setAdminAgentPageShow')
						this.$commonJs.waitFunction.waitRelaunch(res.msg,'../../../../pages/admin/home/home')
					}else{
						this.$commonJs.showToast.showNoneToast(res.err)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			}
		}
	}
</script>
